<template>
  <div class="main-project-w">
    <div class="title-w">
      <span class="project-name">{{ item.projectName }}</span>
      <span class="name-tip">{{ item.nameTip }}</span>
    </div>
    <div class="desc-w" v-if="item.desc">
      <TextPanel :text-arr="item.desc"></TextPanel>
    </div>
  </div>
</template>

<script>
import TextPanel from '@/components/cmp/TextPanel'

export default {
  name: 'CompanyB',
  components: {TextPanel},
  props: ['item'],
}
</script>

<style lang="scss" scoped>
@import "src/assets/common.scss";

.main-project-w {
  padding: 8px 27px;
  position: relative;
  display: flex;
  flex-direction: column;

  &::after {
    position: absolute;
    content: "";
    bottom: 0;
    height: 1PX;
    width: 80%;
    transform: translateX(10%);
    border-radius: 1PX;
    background: rgb(230, 230, 230);
  }

  .title-w {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;

    //.right {
    //  flex: 1;
    //  padding: 2px;
    //  display: flex;
    //  justify-content: flex-end;
    //  align-items: flex-end;
    //  color: $c2;
    //  position: relative;
    //  font-weight: bolder;
    //  font-size: 12px;
    //  height: 100%;
    //
    //  &.show:after {
    //    position: absolute;
    //    content: "";
    //    background: $c2;
    //    top: 0;
    //    height: 3px;
    //    width: 10px;
    //    border-radius: 3px;
    //    background: $c2;
    //  }
    //}


    .project-name {
      font-size: 12px;
      color: rgb(60, 60, 60);
      font-weight: bolder;
      margin-right: 10px;
    }

    .name-tip {
      font-size: 10px;
      color: rgb(150, 150, 150);
    }


  }

  .desc-w {
    border-top: none;
    background: white;
    padding: 10px;
    font-size: 8px;
    line-height: 1.5;

    color: $c4;
  }


}

</style>
